<!-- 以后项目的根组件-->
<template>
    <div>
        <!-- 1.0利用mint-ui中的header组件实现整个系统的头部  -->
        <mt-header fixed title="vue学习"></mt-header>

        <!--2.0利用vue-route的route-view实现站位 -->
        <router-view ></router-view>

        <!--3.0 利用mui中的 tabbar组件实现系统底部-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/tabbar-with-chat">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link  class="mui-tab-item" to="/shopcar/car">
                <span class="mui-icon mui-icon-contact">
                    <span id="badge" class="mui-badge">0</span>
                </span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/tabbar-with-map">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
    //需要在哪个组件使用到js就需要在哪个组件导入
    import {Toast} from 'mint-ui';
    import {vm,COUNTSTR} from './kits/vm.js';
    vm.$on(COUNTSTR,count=>{
        var badgeobj = document.getElementById('badge');
        badgeobj.innerText = parseInt(badgeobj.innerText) + count;
    });
    /*负责导出.vue这个组件对象本质上是一个vue对象，所以vue中该定义的元素都可以使用*/
    export default{
        data(){ //等价于 es5 data ：function（）
            return{
                msg:'hello vuejsddddddd'
            }
        },
        methods:{
            tip(){
                Toast('nihao')
            }
        },
        created(){
        },
        mounted(){
            // var ballend = document.getElementById('ballend');
            // console.log( ballend.getBoundingClientRect() );
            // console.log( ballend.offsetLeft);
            // console.log( ballend.offsetTop);
        }
    }
</script>

<style scoped>
    /*当前页面的css样式,scoped表示这个里面写的css样式只是在当前页面组件生效,不会影响其他组件*/

    .red {
        color: red;
        
    }
</style>